<template>
  <com-header title="商品列表" back="home"></com-header>
  <van-tabs
    v-model:active="active"
    title-active-color="#fff"
    title-inactive-color="rgba(255, 255, 255, 0.7)"
    color="transparent"
    background="#1baeae"
    @click-tab="changeItem"
    sticky
  >
    <van-dropdown-menu active-color="#1baeae">
      <van-dropdown-item
        @change="changeMenu"
        v-for="(item, index) in dropItems"
        :options="item.list"
        :title="item.title"
        v-model="item.selected"
      />
    </van-dropdown-menu>
    <van-tab :title="item.name" v-for="(item, index) in tabs" :key="index">
      <van-list
        v-model:loading="good[index].param.loading"
        :finished="good[index].param.finished"
        :finished-text="good[index].params.p > 1 ? '没有更多了' : ''"
        @load="getData"
      >
        <van-empty
          description="暂无数据"
          v-if="
            good[index].params.p == 1 &&
            good[index].data.length == 0 &&
            !good[index].param.isLoading
          "
        />
        <van-row
          justify="space-between"
          align="center"
          class="list padded-10 van-hairline--bottom"
          v-for="(item, i) in good[index].data"
          :key="i"
          @click="detail(item.id)"
        >
          <van-col :span="6">
            <van-tag
              type="success"
              color="rgba(27, 174, 174, .5)"
              text-color="#fff"
              size="medium"
              v-if="item.all_red > 0"
              class="reward"
            >
              <van-icon name="award-o" size="12" />
              <span class="p-l-2">+{{ item.all_red }}</span>
            </van-tag>
            <van-image width="100" height="100" :src="item.image" />
          </van-col>
          <van-col :span="18" class="content p-l-10">
            <div class="title">
              <div class="text-3 van-ellipsis ftn14 p-r-10 name">
                {{ item.name }}
              </div>
              <div class="icon" v-if="item.puttype == 1">
                <van-icon name="like" color="#1baeae" />
              </div>
            </div>

            <div class="other">
              <div>
                <div class="ftn12 p-b-5">
                  <span class="text-7" style="text-decoration: line-through"
                    >￥{{ item.price }}</span
                  >
                  <span class="text-green ftn12 p-l-5" v-if="item.type == 2"
                    >￥{{ (item.price - item.back_price).toFixed(2) }}</span
                  >
                </div>

                <div class="text-7 ftn12 p-b-5">
                  剩{{ item.exitnum }}/{{ item.num }}份
                </div>
              </div>
              <van-button type="primary" size="mini" v-if="!item.exittime"
                >去申请</van-button
              >
              <van-button type="default" size="mini" v-else>
                <van-count-down :time="item.exittime * 1000" @finish="onLoad">
                  <template #default="timeData">
                    <span class="block">{{ timeData.hours }}</span>
                    <span class="colon">时</span>
                    <span class="block">{{ timeData.minutes }}</span>
                    <span class="colon">分</span>
                    <span class="block">{{ timeData.seconds }}</span>
                    <span class="colon">秒</span>
                  </template>
                </van-count-down>
              </van-button>
            </div>
          </van-col>
        </van-row>
      </van-list>
    </van-tab>
  </van-tabs>
</template>
<script lang="ts">
import { defineComponent, ref, onMounted } from "vue";
import { useRoute, useRouter } from "vue-router";
import { getGoodList } from "@/service/good";
import { fnGetCategory } from "@/service/index";
import router from "@/router";
type ITab = {
  name: string;
  id: number;
};
export default defineComponent({
  setup() {
    const active = ref(0),
      tabs = ref<ITab[]>([
        {
          name: "折扣",
          id: 2,
        },
        {
          name: "零折购",
          id: 1,
        },
        {
          name: "奖励购",
          id: 3,
        },
        {
          name: "超级购",
          id: 4,
        },
      ]),
      route = useRoute();
    let good = ref<any>([]),
      categorys = ref<any>([]);

    const dropItems = ref<any>([]);

    const getData = () => {
      let { loading, finished, isLoading } = good.value[active.value].param;
      if (!isLoading && !finished) {
        good.value[active.value].params.p++;
        good.value[active.value].param.isLoading = true;
        getGoodList(good.value[active.value].params).then((res) => {
          good.value[active.value].param.isLoading = false;
          loading = false;
          if (res) {
            if (res.status) {
              good.value[active.value].data = [
                ...good.value[active.value].data,
                ...res.data,
              ];
            } else {
              finished = true;
              if (good.value[active.value].params.p == 1)
                good.value[active.value].data = [];
            }
            good.value[active.value].param = { loading, finished, isLoading };
          }
        });
      }
    };

    const onLoad = () => {
      let { category, downtype, puttype, sort } =
        good.value[active.value].params;
      good.value[active.value] = {
        param: {
          loading: true,
          finished: false,
          isLoading: false,
        },
        data: [],
        params: {
          p: 0,
          n: 50,
          type: tabs.value[active.value].id,
          category: category,
          downtype: downtype,
          puttype: puttype,
          sort: sort,
        },
      };
      getData();
    };

    const changeItem = ({ name }: any) => {
      active.value = name;
      initdropItems();
      initParam();
      onLoad();
    };

    // 切换下拉菜单
    const changeMenu = (e: number) => {
      initParam();
    };

    // 接收下拉菜单参数
    const initParam = () => {
      dropItems.value.forEach((item: any) => {
        let select: any = item.list.find(
          (value: any) => value.value == item.selected
        );
        let others = ["全部", "全部分类", "默认排序"];
        if (others.includes(select.text)) {
          switch (item.type) {
            case "category":
              item.title = "分类类别";
              break;
            case "puttype":
              item.title = "审核方式";
              break;
            case "downtype":
              item.title = "购买平台";
              break;
            case "sort":
              item.title = "默认排序";
              break;
          }
        } else {
          item.title = select.text;
        }
        good.value[active.value].params[item.type] = item.selected;
      });
      onLoad();
    };

    // 初始化下拉菜单选项
    const initdropItems = () => {
        dropItems.value = [
            {
              type: "category",
              title: "分类类别",
              selected: "",
              list: categorys.value
            },
            {
              type: "puttype",
              title: "审核方式",
              selected: "",
              list: [
                {
                  text: "全部",
                  value: "",
                },
                {
                  text: "自动通过",
                  value: 1,
                },
                {
                  text: "人工审核",
                  value: 2,
                },
              ],
            },
            {
              type: "downtype",
              title: "购买平台",
              selected: "",
              list: [
                {
                  text: "全部",
                  value: "",
                },
                {
                  text: "淘宝",
                  value: 1,
                },
                {
                  text: "天猫",
                  value: 2,
                },
                {
                  text: "京东",
                  value: 3,
                },
                {
                  text: "拼多多",
                  value: 4,
                },
                {
                  text: "阿里巴巴",
                  value: 5,
                },
                {
                  text: "抖音",
                  value: 6,
                },
                {
                  text: "快手",
                  value: 7,
                },
                {
                  text: "淘宝特价版",
                  value: 8,
                },
              ],
            },
            {
              type: "sort",
              title: "默认排序",
              selected: "",
              list: [
                {
                  text: "默认排序",
                  value: "",
                },
                {
                  text: "份数最少",
                  value: 1,
                },
                {
                  text: "人气最高",
                  value: 2,
                },
                {
                  text: "价格最高",
                  value: 3,
                },
                {
                  text: "最新发布",
                  value: 4,
                },
              ],
            },
          ];
    }

    // 获取分类类别
    const getCategoryData = () => {
      fnGetCategory().then((res) => {
        console.log(res);
        if (res) {
          categorys.value = res.data.map((item: any) => {
            let obj = { text: item.name, value: item.id };
            return obj;
          });
          categorys.value.unshift({ text: '全部分类', value: '' })
          initdropItems();
        }
      });
    };

    const detail = (id: string) => {
      router.push({
        name: 'product',
        params: {id: id}
      })
    }

    onMounted(() => {
      tabs.value.forEach((item) => {
        good.value.push({
          param: {
            loading: false,
            finished: false,
            isLoading: false,
          },
          data: [],
          params: {
            p: 0,
            n: 50,
            type: 1,
            category: "",
            downtype: "",
            puttype: "",
            sort: "",
          },
        });
      });
      active.value = tabs.value.findIndex(
        (item) => item.id == Number(route.query.id)
      );
      good.value[active.value].params.type = Number(route.query.id);
      onLoad();
      getCategoryData();
    });

    return {
      active,
      tabs,
      good,
      onLoad,
      changeItem,
      getData,
      dropItems,
      changeMenu,
      detail
    };
  },
});
</script>
<style lang="less">
.list {
  .content {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100px;
  }
  .title,
  .other {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end;
  }
  .name {
    flex: 4;
  }
  .icon {
    text-align: center;
    line-height: 30px;
    width: 30px;
    height: 30px;
    background-color: aliceblue;
    border-radius: 50%;
  }
  .reward {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 5;
  }
}
</style>
